<template>
  <div>
    <div class="ta-message">
      <div class="ta-left">
        <div class="ta-name">
          <span>{{ userSimpleInfo.username }}</span>
          <!-- <i class="el-icon-arrow-right"></i> -->
        </div>
        <div class="ta-fans-like">
          <span
            >{{ userSimpleInfo.fansNum }}粉丝<span style="margin: 0 5px">|</span
            >{{ userSimpleInfo.totalLikeNum }}获赞</span
          >
        </div>
      </div>
      <div class="ta-right">
        <el-button
          :class="[
            userSimpleInfo.follow ? 'concern-friend' : 'unconcern-person',
          ]"
          plain
          size="small"
          @click="changeCorcern()"
          ><template>{{
            userSimpleInfo.follow ? "已关注" : "关注"
          }}</template></el-button
        >
        <!-- <el-button  style="background: red;color:#fff;" plain size="small" v-else @click="changeCorcern()">关注</el-button> -->
      </div>
    </div>
    <div class="past-works">
      <ul>
        <li v-for="item in dataList" :key="item.worksId">
          <div>
            <img class="past-works-img" :src="item.coverPath" />
          </div>
          <div class="place-top" v-show="item.top">
            <span>置顶</span>
          </div>
          <div class="past-works-number">
            <span class="iconfont icon-aixin">{{ item.likeCounts }}</span>
          </div>
        </li>
        <div style="width:100%;">
          <p
            style="
              margin: 100px 0 20px 0;
              color: #c7c7c7;
              font-size: 12px;
              text-align: center;
            "
          >
            暂时没有更多作品
          </p>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import { cancelUserFollowApi, handleUserFollowApi } from "@/api/production";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
    };
  },
  props: ["dataList", "userSimpleInfo", "friendId"],
  created() {},
  methods: {
    changeCorcern() {
      if (this.userSimpleInfo.follow) {
        // 调用取消点赞接口
        cancelUserFollowApi({
          userId: this.userInfo.userId,
          friendId: this.friendId,
        }).then((res) => {
          if (res.data.code == 200) {
            this.userSimpleInfo.follow = !this.userSimpleInfo.follow;
          }
        });
      } else {
        // 调用关注接口
        handleUserFollowApi({
          userId: this.userInfo.userId,
          userFriendId: this.friendId,
        }).then((res) => {
          if (res.data.code == 200) {
            this.userSimpleInfo.follow = !this.userSimpleInfo.follow;
          }
        });
      }
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.ta-message {
  height: 80px;
  line-height: 80px;
  padding: 15px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #4c4b4b;
}
.ta-left {
  width: 62%;
  height: 100%;
  right: 0;
}
.ta-name {
  width: 100%;
  height: 35px;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 35px;
}
.ta-fans-like {
  width: 100%;
  height: 35px;
  line-height: 14px;
  font-size: 12px;
}
.ta-right .el-button {
  border: none;
}
.past-works ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  position: absolute;
  top: 80px;
  bottom: 0;
  overflow-y: auto;
}
.past-works ul li {
  position: relative;
  width: 28%;
  height: 130px;
  margin: 10px;
}
.past-works ul::-webkit-scrollbar {
  display: none;
}

/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.past-works ul {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.past-works-img {
  width: 100%;
  height: 130px;
  border-radius: 5px;
}
.past-works-number {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  bottom: 0px;
  border-radius: 5px;
  height: 35px;
  opacity: 0.8;

  position: absolute;
  width: 100%;
}
.past-works-number span {
  align-items: center;
  bottom: 4px;
  color: #fff;
  display: flex;
  flex-direction: row;
  font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  left: 8px;
  line-height: 22px;
  position: absolute;
}
.past-works-number .icon-aixin:before {
  margin-right: 2px;
}
.place-top span {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 12px;
  padding: 2px 4px;
  background: #f8cc15;
  color: #000;
  border-radius: 5px;
}
.concern-friend {
  background: #4f4f4f;
  color: #a1a1a2;
}
.unconcern-person {
  background: red;
  color: #fff;
}
.concern-friend:hover {
  background: #4f4f4f !important;
  color: #a1a1a2 !important;
  border: none;
}
.unconcern-person:hover {
  background: red !important;
  color: #fff !important;
  border: none;
}
.concern-friend:focus {
  background: #4f4f4f !important;
  color: #a1a1a2 !important;
  border: none;
}
.unconcern-person:focus {
  background: red !important;
  color: #fff !important;
  border: none;
}
</style>
